<template lang="html">
  <div class="radionav">
      <div class="container"  v-for="(item,index) in radioNavData" v-bind:class="[{'active1':index==4},{'active2':index==9}]">
          <div class="pic">
              <img :src="item.url" alt="">
          </div>
          <div class="desc">
            {{item.title}}
          </div>
      </div>
  </div>
</template>

<script>
export default {

  name:"radionav",
  data(){
    return{
      radioNavData:[

      ]
    }
  },
  components:{

  },
  created(){
    // http://localhost:8080/static/%20radioNav.json
      const  radioNavUrl="http://localhost:8080/static/%20radioNav.json"

      this.$axios.get(radioNavUrl)
      .then(res=>{
          // console.log(res.data);
          this.radioNavData=res.data.radioNavData;
      })
      .catch((error) => {
        console.log(error);
      })
  }

}
</script>

<style scoped>
.radionav{
  width: 100%;
  overflow: hidden;
  clear: both;
  padding-bottom: .3rem;
  /* box-sizing:border-box; */
}
.container{
    float: left;
    margin-right: .22rem;
    margin-top: .27rem;
}
.radionav .active1,.radionav .active2{
  margin-right: 0;
}
.container .pic,.container .pic img{
  width: 1.2rem;
  height: 1.2rem;
}
.container .desc{
  margin-top: .15rem;
}

</style>
